<template>
	<view class="Movie">
		<!-- <web-view src="https://www.baidu.com/">跳转</web-view> -->
		<swiperComponent :swiperImgList="swiperImgList"></swiperComponent>
		<recommend>
			<text slot="title">热门电影</text>
			<view class="recommended_more" slot="more" @click="gotoMore">查看更多</view>
			<view slot="content" class="content">
				<view v-for="(item, index) in test_list" :key="index" class="content_box" @click="gotoDetail(item)">
					<image :src="item.src" mode="" slot="m_image"></image>
					<view slot="m_name" class="m_name">{{item.name}}</view>
				</view>
			</view>
		</recommend>
		<!-- 测试阶段后期在改 -->
		<recommend>
			<text slot="title">最新电影</text>
			<view class="recommended_more" slot="more" @click="gotoMore">查看更多</view>
			<view slot="content" class="content">
				<view v-for="(item, index) in test_list" :key="index" class="content_box" @click="gotoDetail(item)">
					<image :src="item.src" mode="" slot="m_image"></image>
					<view slot="m_name" class="m_name">{{item.name}}</view>
				</view>
			</view>
		</recommend>
		<recommend>
			<text slot="title">高分电影</text>
			<view class="recommended_more" slot="more" @click="gotoMore">查看更多</view>
			<view slot="content" class="content">
				<view v-for="(item, index) in test_list" :key="index" class="content_box" @click="gotoDetail(item)">
					<image :src="item.src" mode="" slot="m_image"></image>
					<view slot="m_name" class="m_name">{{item.name}}</view>
				</view>
			</view>
		</recommend>
	</view>
</template>

<script>
	import swiperComponent from '../../components/swiper_btn_component/swiper_btn_component.vue'
	import recommend from '../../components/recommended_nav/recommended_nav.vue'

	export default {
		data() {
			return {
				queryObj: {
					classify: '全部',
					limit: 5,
					page: 1
				},
				swiperImgList: [],

				list_query: {
					classify: '全部',
					limit: 3,
					page: 1
				},
				test_list: [],
				flag: 1
			};
		},
		components: {
			swiperComponent,
			recommend
		},
		onLoad() {
			this.getSwiperImg()
			this.getList()
		},
		onReachBottom() {
			this.flag += 1
		},
		methods: {
			async getSwiperImg() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/movie/getmovie',
					data: this.queryObj
				})

				this.swiperImgList = res.data
			},

			async getList() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/movie/getmovie',
					data: this.list_query
				})
				this.test_list = res.data
			},
			// 测试阶段， 还没有对应的数据库
			gotoMore() {
				uni.navigateTo({
					url: `/subpkg/movie_classify/movie_classify`
				})
			},

			gotoDetail(item) {
				uni.navigateTo({
					url: `../../subpkg/movie_detail/movie_detail?name=${item.name}&director=${item.director}&info=${item.info}&star=${item.star}&classify=${item.classify}&img_src=${item.src}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/css/content.css';
</style>
